<template>
	<view>
		<view  style="background: linear-gradient( 180deg, #FFEEEB 0%, #F8F8FA 100%);height: 310rpx;position: relative;">
			<u-navbar title="我的" placeholder bg-color="transparent" >
			
			<view slot="left"></view>
			</u-navbar>
		
		</view>
		<view class="u-p-20" style="margin-top: -130rpx;z-index: 99;position: relative;">
			<view class="u-p-30 u-bg-fff " style="width: 710rpx;box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0,0,0,0.06);border-radius: 20rpx;">
				<view class="u-flex u-flex-between">
					<view class="u-flex" @click="$u.route('/pages/member/setUp')">
						<image :src="user.avatar" style="width: 145rpx;height: 145rpx;border-radius: 50%;"></image>
						<view class="u-m-l-24">
							<view class="u-flex u-flex-y-center">
								<view class="u-f-32 u-bold">{{user.nickname || '登录/注册'}}</view>
								<view class="u-m-l-30 u-f-20 u-bold" style="color: #EA4D44; padding: 0 10rpx; height: 30rpx;text-align: center;line-height: 30rpx ;border-radius: 25% ;background: rgba(234,77,68,0.1);">{{user.level}}</view>
							</view>
							<view class="u-flex u-f-24 u-m-t-12">
								<view>{{user.team_name || '暂无团队'}}</view>
								<view style="margin: 0 18rpx;color: #D9D9D9;">|</view>
								<view>{{user.team_num || 0}}</view>
							</view>
							<view class="u-flex-y-center u-m-t-12" @click.stop="$u.route('/pages/member/score')">
								<view class="u-f-28">积分：{{user.score || 0}}</view>
								<image src="/static/right.png" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
							</view>
						</view>
					</view>
					<view class="u-p-2 u-flex" style="flex-direction: column;align-items: center;" @click="showQrcode=true">
						<image src="/static/qrcode.png" style="width: 44rpx;height: 44rpx;"></image>
						<u-gap height="10rpx"></u-gap>
						<view class="u-f-26">二维码</view>
					</view>
				</view>
					<u-gap height="20rpx"></u-gap>
				
					<view class="u-flex-1">
										<u-line-progress :percentage="user.exp_rate" activeColor="#EA4D44" :showText="false" inactive-color="#FFE4E4"></u-line-progress>
									</view>
						<u-gap height="10rpx"></u-gap>
						<view class="u-f-26">当前经验值{{user.exp || 0}}，距下一级还需{{user.next_diff_exp || 0}}经验值</view>
				
			</view>
				<u-gap height="20rpx"></u-gap>
				<view class="u-r-20 u-bg-fff " style="padding: 26rpx 20rpx;">
					<view class="u-flex-y-center u-flex-between"  @click="$u.route('/pages/order/order')">
						<view class="u-f-32 u-bold">我的订单</view>
					
					</view>
					<u-gap height="40rpx"></u-gap>
					<view class="u-flex-y-center u-flex-between">
						<view class="u-flex-xy-center u-p-r" style="flex-direction: column;" @click="$u.route('/pages/order/order?status=1')">
							<view class="u-p-a" style="top: -20rpx;right: -20rpx;z-index: 2;"
								v-if="order_static[0] > 0">
								<u-badge type="error" max="99" :value="order_static[0]"></u-badge>
							</view>
							<image src="../../static/o1.png" style="width: 40rpx;height: 40rpx;" ></image>
							<view class="u-f-24 u-m-t-16">待支付</view>
							
						</view>
						<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=2')">
							<view class="u-p-a" style="top: -20rpx;right: -20rpx;z-index: 2;"
								v-if="order_static[1] > 0">
								<u-badge type="error" max="99" :value="order_static[1]"></u-badge>
							</view>
							<image src="../../static/o2.png" style="width: 40rpx;height: 40rpx;" ></image>
							<view class="u-f-24 u-m-t-16">待发货</view>
						</view>
						<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=3')">
							<view class="u-p-a" style="top: -20rpx;right: -20rpx;z-index: 2;"
								v-if="order_static[2] > 0">
								<u-badge type="error" max="99" :value="order_static[2]"></u-badge>
							</view>
							<image src="../../static/o3.png" style="width: 40rpx;height: 40rpx;" ></image>
							<view class="u-f-24 u-m-t-16">待收货</view>
						</view>
						<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=4')">
							<image src="../../static/o4.png" style="width: 40rpx;height: 40rpx;" ></image>
							<view class="u-f-24 u-m-t-16">已完成</view>
						</view>
						<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"  @click="$u.route('/pages/order/order')">
							<image src="../../static/o5.png" style="width: 40rpx;height: 40rpx;" ></image>
							<view class="u-f-24 u-m-t-16">售后</view>
						</view>
					</view>
				</view>
				<u-gap height="20rpx"></u-gap>
				<view class="u-r-20 u-bg-fff u-p-40" >
					<view class="grid">
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="scan">
						<image src="../../static/m2.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">馬上下載</view>
					</view>
					<view class="u-flex-xy-center u-p-r" @click="go('/pages/member/equip')" style="flex-direction: column;"
						>
						<image src="../../static/m7.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">虛擬裝備</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;" @click="go()"
						>
						<image src="../../static/m8.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">對戰歷史</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;" @click="go()"
						>
						<image src="../../static/m9.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">所屬俱樂部</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"  @click="go('/pages/changdiban/login')"
						>
						<image src="../../static/changdiban.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">場地版</view>
					</view>
					</view>
				</view>
		</view>
	
		
		<!-- <image src="../../static/bei3.png" class="bei"></image>
		<view class="u-p-r" style="z-index: 2;">
			<u-navbar title="运动项目" placeholder bg-color="transparent">
				<view slot="left"></view>
			</u-navbar>
			<view class="u-flex u-flex-between" style="padding: 0 68rpx 0 50rpx;    position: relative;">
				<view>
	
					<view  @click="$u.route('/pages/shop/score')" class="u-f-24 u-bg-fff" style="color: #AC0800;border-radius: 30rpx 0rpx 30rpx 0rpx;width: 180rpx;height: 48rpx;line-height: 48rpx;text-align: center;">积分兑换好礼</view>
					<u-gap height="10rpx"></u-gap>
					<view style="font-size:56rpx;" class="u-c-fff u-bold">灬熊大都会</view>
					<u-gap height="20rpx"></u-gap>
					<view class="u-f-26 u-c-fff u-flex">
						<view>俱乐部</view>
						<view class="u-m-l-20">场地预约</view>
						<view class="u-m-l-20">对战历史</view>
					</view>
				</view>
				<image src="/static/Group_269.png" style="width: 225rpx;height: 257rpx;"></image>
			</view>
			
			<view class="u-p-20" style="margin-top: -68rpx;    z-index: 99;    position: relative;">
				<view class="u-p-30 u-bg-fff " style="width: 710rpx;box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0,0,0,0.06);border-radius: 20rpx;">
					<view class="u-flex u-flex-between">
						<view class="u-flex">
							<image :src="user.avatar" style="width: 145rpx;height: 145rpx;border-radius: 50%;"></image>
							<view class="u-m-l-24">
								<view class="u-flex">
									<view class="u-f-32 u-bold">{{user.nickname}}</view>
									<view class="u-m-l-30 u-f-20 u-bold" style="color: #EA4D44; width: 60rpx;height: 30rpx;text-align: center;line-height: 30rpx ;border-radius: 25% ;background: rgba(234,77,68,0.1);">{{user.level}}</view>
								</view>
								<view class="u-flex u-f-24 u-m-t-12">
									<view style="color:#A0A4AD">胜：</view>
									<view class="u-f-28 u-bold u-m-r-30">{{user.down_status[1]}}</view>
									<view  style="color:#A0A4AD">和：</view>
									<view  class="u-f-28 u-bold u-m-r-30">{{user.down_status[2]}}</view>
									<view  style="color:#A0A4AD">败：</view>
									<view  class="u-f-28 u-bold">{{user.down_status[0]}}</view>
								</view>
								<view class="u-flex-y-center u-m-t-16" @click="$u.route('/pages/member/score')">
									<view class="u-f-28">积分：{{user.score}}</view>
									<image src="/static/right.png" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
								</view>
							</view>
						</view>
						<view class="u-p-2 u-flex" style="flex-direction: column;align-items: center;" @click="showQrcode=true">
							<image src="/static/qrcode.png" style="width: 44rpx;height: 44rpx;"></image>
							<u-gap height="10rpx"></u-gap>
							<view class="u-f-26">二维码</view>
						</view>
					</view>
						<u-gap height="20rpx"></u-gap>
					
						<view class="u-flex-1">
											<u-line-progress :percentage="user.exp_rate" activeColor="#EA4D44" :showText="false" inactive-color="#FFE4E4"></u-line-progress>
										</view>
							<u-gap height="10rpx"></u-gap>
							<view class="u-f-26">当前积分{{user.exp}}，距下一级还需{{user.all_exp-user.exp}}积分</view>
					
				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
					<view class="u-r-16 u-bg-fff u-p-30">
						<view class="u-flex-y-center u-flex-between"  @click="$u.route('/pages/order/order')">
							<view class="u-f-28 u-bold">我的订单</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
						<u-gap height="30rpx"></u-gap>
						<view class="u-flex-y-center u-flex-between">
							<view class="u-flex-xy-center" style="flex-direction: column;" @click="$u.route('/pages/order/order?status=1')">
								<image src="../../static/o1.png" style="width: 40rpx;height: 40rpx;" ></image>
								<view class="u-f-24 u-m-t-12">待支付</view>
							</view>
							<view class="u-flex-xy-center" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=2')">
								<image src="../../static/o2.png" style="width: 40rpx;height: 40rpx;" ></image>
								<view class="u-f-24 u-m-t-12">待发货</view>
							</view>
							<view class="u-flex-xy-center" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=3')">
								<image src="../../static/o3.png" style="width: 40rpx;height: 40rpx;" ></image>
								<view class="u-f-24 u-m-t-12">待收货</view>
							</view>
							<view class="u-flex-xy-center" style="flex-direction: column;"  @click="$u.route('/pages/order/order?status=4')">
								<image src="../../static/o4.png" style="width: 40rpx;height: 40rpx;" ></image>
								<view class="u-f-24 u-m-t-12">已完成</view>
							</view>
							
						</view>
					</view>
						<u-gap height="20rpx"></u-gap>
			<view class="u-p-30">
				<view class="u-f-32 u-bold">全部功能</view>
				<u-gap height="40rpx"></u-gap>
				<view class="grid">
								
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/message/message')">
						<image src="../../static/m1.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">最新消息</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/member/download/download')">
						<image src="../../static/m2.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">马上下载</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/member/discount')">
						<image src="../../static/m3.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">88优惠</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/shop/shop')">
						<image src="../../static/m4.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">影片库</view>
					</view>
					<view class="u-flex-xy-center u-p-r" style="flex-direction: column;"
						@click="$u.route('/pages/shop/cate')">
						<image src="../../static/m5.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">商城</view>
					</view>
				
					<button open-type="contact" :plain="true" class="u-flex-xy-center u-p-r" style="flex-direction: column;margin: 0;padding: 0;border: none;">
						<image src="../../static/m6.png" style="width: 52rpx;height: 52rpx;"></image>
						<view class="u-f-28 u-m-t-20">在线客服</view>
					</button>
				</view>
			</view>
			
		</view>
		 -->
		 <u-popup :show="showQrcode" @close="showQrcode=false" mode="center">
		 	
		 	<image :src="user.qrcode_image" style="width: 200rpx;height: 200rpx;"></image>
		 </u-popup>
	</view>
</template>


<script>

	export default {
		
		data() {
			return {
				user: {},
				showQrcode:false,
					order_static: [0, 0, 0, 0],
				
			}
		},
		onLoad() {
	

		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.showModal({
					content: "请先登录",
					title: "提示",
					confirmText: "去登录",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					}
				})
				return
			}
			this.getUser()
		},
		
		methods: {
			go(url){
				console.log(url)
				if (!url) {
					return uni.showToast({
						title: "开发中，敬请期待",
						icon: "none"
					})
				}
				if (url.match('changdiban')) {
					const r = uni.getStorageSync('DB_userinfo')
					if (r) {
						uni.navigateTo({
							url: "../changdiban/info"
						})
						return
					}
				}
				uni.navigateTo({
					url
				})
			},
			scan(){
				uni.scanCode({
					success(e) {
						
					}
				})
			},
			async getUser() {
				let res = await uni.$u.http.post('user/index');
				this.user = res
				this.order_static = res.order_static
				uni.setStorageSync('userInfo', res)
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8FA;
		
	}
	.bei {
		width: 100%;
		height: 560rpx;
	
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	
		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 20rpx;
		}
	
</style>